<template>
      <div class="login-form">
        <div class="g-form">
            <div class="g-form-line">
                <span class="g-form-label">用户名:</span>
                <div class="g-form-input">
                    <input type="text" v-model="usernameModel" placeholder="输入用户名">
                </div>
                <span class="error">{{userErrors.errorText}}</span>
            </div>
            <div class="g-form-line">
                <span class="g-form-label">密码:</span>
                <div class="g-form-input">
                    <input type="password" v-model="passwordModel" placeholder="请输入密码">
                </div>
                <span class="error">{{passwordErrors.errorText}}</span>
            </div>
          <div class="g-form-line">
                <span class="g-form-label">密码:</span>
                <div class="g-form-input">
                    <input type="password" v-model="rePasswordModel" placeholder="请再次输入密码">
                </div>
                <span class="error">{{rePasswordErrors.errorText}}</span>
            </div>
            <div class="g-form-line">
                <div class="g-form-btn">
                    <a @click="onreg" class="button">注册</a>
                </div>
            </div>
            <!-- <span>{{errorText}}</span> -->
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      usernameModel: "",
      passwordModel: "",
      rePasswordModel: "",
      errorText: ""
    };
  },
  computed: {
    userErrors() {
      let errorText, status;
      if (!/@/g.test(this.usernameModel)) {
        status = false;
        errorText = "不包含@";
      } else {
        status = true;
        errorText = "";
      }
      if (!this.userFlag) {
        errorText = "";
        this.userFlag = true;
      }
      return {
        status,
        errorText
      };
    },
    passwordErrors() {
      let errorText, status;
      if (!/^\w{1,6}$/g.test(this.passwordModel)) {
        status = false;
        errorText = "密码不是1-6位";
      } else {
        status = true;
        errorText = "";
      }
      if (!this.passwordFlag) {
        errorText = "";
        this.passwordFlag = true;
      }
      return {
        status,
        errorText
      };
    },
    rePasswordErrors(){
      let errorText, status;
      if(this.rePasswordModel!=this.passwordModel){
        errorText='两次输入密码不一致';
        status=false;
      }
      else{
        errorText='';
        status=true
      }
      return{
        status,
        errorText
      }
    }
  },
  methods: {
    onreg() {
      if(!this.userErrors.status||!this.passwordErrors.status||!this.rePasswordErrors.status){
             this.errorText='注册信息格式错误'
      }else{
        this.errorText='';
        this.$emit('has-reg');
      }
    }
  }
};
</script>

